<template>
    <el-button class="backg" @click="handleBugEmail" color="#fac03d">
        <template #default>
            <div class="default_style">
                <img src="../../assets/bug.svg" alt="error" id="BugLogo">
                <div>bug上报</div>
            </div>
        </template>
    </el-button>

    <el-dialog v-model="dialogVisible" center="true" custom-class="bug_el_dialog" :show-close="false">
        <template #header>
            <b>BUG匿名提交</b>
        </template>
        <el-input v-model="textarea" :rows="2" type="textarea" placeholder="请输入您发现的bug" />

        <template #footer>
            <el-button type="warning" id="btnOfDialog" @click="handleDialogBtn">提交bug</el-button>
        </template>

    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { sendBug } from '../../api/api'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const textarea = ref('')

const handleBugEmail = () => {
    dialogVisible.value = true
}
const handleDialogBtn = async () => {
    try {
        await sendBug(textarea.value)
        ElMessage.success('提交成功,感谢您的反馈')
    } catch (error) {
        ElMessage.error('提交失败')
    }
    dialogVisible.value = false
    textarea.value = ''
}

</script>

<style>
.backg {
    width: 60px;
    height: 60px !important;
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: 12px;
    color: var(--left-black);
}

.default_style {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#BugLogo {
    width: 70%;
    height: 70%;
}

.bug_el_dialog {
    background-color: var(--left-black) !important;
}

#btnOfDialog {
    background-color: var(--right-yellow);
    color: var(--left-black);
}
</style>